<template>
    <div class="content">
        <!-- 头部 -->
        <div class="header-setting">
            <!-- 面包屑 -->
            <div>
                <a-breadcrumb class="breadcrumb">
                    <a-breadcrumb-item>
                        <a href="../main">首页</a>
                    </a-breadcrumb-item>
                    <a-breadcrumb-item>系统配置</a-breadcrumb-item>
                    <a-breadcrumb-item>岗位列表</a-breadcrumb-item>
                </a-breadcrumb>
            </div>
            <div class="breadcrumb addBtn">
                <div v-show="!visible">
                    <a-button type="primary" icon="user-add" @click="showModal">添加岗位</a-button>
                </div>
                <div v-show="visible" class="saveDelete">
                    <a-button type="primary" icon="save" @click="modifyPost">修改</a-button>
                    <a-popconfirm title="确认删除？" okText="确认" cancelText="取消"
                                  @confirm="deletePost" placement="topLeft">
                        <a-button type="danger" icon="delete">删除</a-button>
                    </a-popconfirm>
                </div>
            </div>
        </div>
        <div class="main" :style="viewHeight">
            <!--        左侧栏-->
            <div class="left-box">
                <template>
                    <a-directory-tree multiple selectable @select="onSelect" :treeData="menuTree"></a-directory-tree>
                </template>
            </div>
            <!--       右侧栏-->
            <div class="right-box" v-show="visible">
                <template v-if="treeData.length > 0">
                    <div v-for="(item,index) in postList" v-show="item.key==nodeIndex">
                        <a-row>
                            <a-col :span="6">岗位名称</a-col>
                            <a-col :span="18">
                                <a-input placeholder="岗位名称" v-model="item.postId" :disabled="disable"/>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="6">岗位显示名称</a-col>
                            <a-col :span="18">
                                <a-input placeholder="岗位显示名称" v-model="item.description" :disabled="disable"/>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="6">操作员权限</a-col>
                            <a-col :span="18">
                                <a-tree checkable defaultExpandParent v-model="item.checkedKeys" :treeData="treeData"
                                        :disabled="disable" :checkStrictly="true" />
                            </a-col>
                        </a-row>
                    </div>
                </template>
            </div>
        </div>
        <!-- modal -->
        <a-modal :title="confirmLoading?'修改岗位':'添加岗位'" centered v-model="showModalBox" @ok="handleOk">
            <a-row>
                <a-col :span="6">岗位名称</a-col>
                <a-col :span="18">
                    <a-input placeholder="岗位名称" v-model="saveStationName"/>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="6">岗位显示名称</a-col>
                    <a-col :span="18">
                        <a-input placeholder="岗位显示名称" v-model="saveShowName"/>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="6">操作员权限</a-col>
                    <a-col :span="18">
                        <a-tree checkable defaultExpandParent v-model="checkedKeys" :treeData="treeData" :checkStrictly="true" />
                    </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script>
    const menuTree = [
        {
            title: '岗位列表',
            key: '1',
            children: []
        }
    ];
    import PerConfig from '../../api/system/ParkApi'

    export default {
        name: "PersonConfig",
        data() {
            return {
                viewHeight: {height: ''},
                checkedKeys: {},
                //树结构 数据
                treeData: [],
                postList: [],
                menuTree,
                //右侧模块
                visible: false,
                showModalBox: false,
                confirmLoading: false,
                disable: true,
                //添加内容
                stationNameData: '',
                showNameData: '',
                selectedKeys: [], // 选中的节点
                selectedPostNodeData: {},//选中的岗位节点数据
                addNode: {},
                addPermissions: [],
                //删除岗位
                nodeIndex: '',
                //弹窗内容
                saveStationName: '',
                saveShowName: '',
            }
        },
        mounted() {
            this.getHeight();
            this.getPowersList();
            this.getStationList();
            this.$store.dispatch('showHead')
        },
        watch: {
            //事件监听
            checkedKeys(val) { //复选框选中的内容
                let value = val.toString()
                this.addPermissions.push(value)
            },
        },
        methods: {
            /**
             * 属性数据转换
             * @param data 转换保存的数据
             * @param getTreeData 原始数据
             */
            convertTree(menuData, getTreeData) {
                for (let i = 0; i < getTreeData.length; i++) {
                    let childrenData = [];
                    // 判断是否存在子节点数据 存在则递归转换
                    if (getTreeData[i].permissions && getTreeData[i].permissions.length > 0) {
                        this.convertTree(childrenData, getTreeData[i].permissions);
                    }
                    // 将数据push到数组中
                    menuData.push({
                        'title': getTreeData[i].description,
                        'key': '' + getTreeData[i].id,
                        'children': childrenData
                    });
                    this.treeData = menuData
                }
            },
            //获取权限列表
            getPowersList() {
                PerConfig.getPowers().then((data) => {
                    if (data.code === 2000) {
                        let menuData = [];
                        let getTreeData = data.data;
                        this.convertTree(menuData, getTreeData);
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            //获取岗位列表
            getStationList() {
                PerConfig.getStation().then((data) => {
                    if (data.code === 2000) {
                        let list = data.data;
                        this.postList = [];
                        this.menuTree[0].children = [];
                        list.forEach(i => {
                            this.menuTree[0].children.push({'title': i.description, 'key': i.id});
                            this.postList.push({
                                'title': i.description,
                                'key': i.id,
                                "description": i.description,
                                postId: i.postId,
                                'children': i.children,
                                'checkedKeys': i.permissions
                            });
                        });
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            //获取浏览器高度
            getHeight() {
                this.viewHeight.height = window.innerHeight - 174 + 'px';
            },
            // 添加岗位 模态框
            showModal() {
                this.showModalBox = true;
                this.clearModalBoxData();
            },
            //模态框点击取消后的操作
            handleCancel() {
                this.showModalBox = false;
            },
            handleOk() {
                this.savePost();
            },
            //点击树节点触发
            onSelect(selectedKeys, node) {

                let index = selectedKeys.toString();
                if (index > 1) {
                    this.visible = true;
                    this.confirmLoading = true;
                    this.nodeIndex = index;
                } else {
                    this.visible = false;
                    this.confirmLoading = false;
                }
                this.selectedKeys = selectedKeys.toString();// selectedKeys 节点的key typeof arr
                this.selectedPostNodeData = node.node.dataRef;
            },
            //添加的操作
            /**
             * 保存  岗位
             * @param postId 岗位名称
             * @param description 岗位显示名称
             * @param permissions 权限ID列表
             */
            add(add) {
                let condition = this.addNode;
                condition.postId = this.stationNameData;
                condition.description = this.showNameData;
                let addPermissions = this.addPermissions;
                let perArr = [];
                addPermissions.forEach(item => {
                    perArr.push(item)
                });
                condition.permissions = perArr[perArr.length - 1].split(',');
                if (this.confirmLoading) {
                    this.showModalBox = true;
                }
                if (add && !this.confirmLoading) {
                    if (condition.postId && condition.description && condition.permissions) {
                        this.addPost(condition);
                        this.showModalBox = false;
                    } else {
                        this.$message.warn('请检查参数')
                    }
                }
            },
            //修改岗位
            modifyPost() {
                let key = this.selectedKeys;
                let filter = this.postList.filter(x => {
                    if (x.key == key) {
                        return x;
                    }
                });
                //显示编辑窗体
                this.clearModalBoxData();
                this.confirmLoading = true;
                this.showModalBox = true;
                //传递数据

                let transferData = {
                    stationName: filter[0].postId,
                    showName: filter[0].description,
                    checkedKeys: filter[0].checkedKeys,
                };
                this.initModalBoxData(transferData);


            },
            addPost(condition) {
                PerConfig.addTreePost(condition).then((data) => {
                    if (data.code === 2000) {
                        this.$message.success("添加成功");
                        this.getStationList();
                        this.showModalBox = false;
                    }
                }).catch(() => {
                    this.$message.warn('添加失败');
                });
            },
            // 修改 psot
            updatePost(condition) {
                PerConfig.updatePosts(condition).then((data) => {
                    if (data.code === 2000) {
                        this.$message.success("修改成功");
                        this.getStationList();
                        this.showModalBox = false;
                    }
                }).catch(error => {
                    this.$message.warn(error.data);
                });
            },
            //保存/修改岗位
            savePost() {
                let operationSign = this.confirmLoading;
                let condition = {};
                // let addPermissions = this.addPermissions;
                let postId = this.saveStationName;
                let description = this.saveShowName;
                if (postId == '' || postId == undefined) {
                    return this.$message.warn('岗位名称不能为空！');
                }
                if (description == '' || description == undefined) {
                    return this.$message.warn('岗位显示名称不能为空');
                }
                // let permissions = addPermissions[addPermissions.length - 1].split(',');
                // let filter = permissions.filter(x => {
                //     if (x == '' || x == undefined) {
                //         return false
                //     }
                //     return true;
                // });
                condition.postId = postId;
                condition.description = description;
                condition.permissions = this.checkedKeys.checked;
                if (operationSign) {
                    //修改
                    condition.id = this.selectedKeys;
                    this.updatePost(condition);
                } else {
                    //添加
                    this.addPost(condition);
                }
            },


            //删除岗位
            deletePost() {
                let id = this.nodeIndex;
                let condition = {};
                this.stationNameData = '';
                this.showNameData = '';
                condition.id = id;
                PerConfig.deletePosts(condition).then((data) => {
                    if (data.code === 2000) {
                        this.$message.success("删除成功");
                        this.getStationList()
                    }
                }).catch(() => {
                    this.$message.warn('删除失败');
                });
            },
            clearModalBoxData() {
                this.saveShowName = "";
                this.saveStationName = "";
                //默认选中权限树顶级节点
                this.checkedKeys = {checked:["1"]};
            },
            initModalBoxData({stationName, showName, checkedKeys}) {
                this.saveShowName = stationName;
                this.saveStationName = showName;
                this.checkedKeys = checkedKeys;
            }


        },
    }
</script>

<style scoped>
    input {
        width: 70%;
    }

    /*头部*/
    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: 124px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .header-setting .breadcrumb {
        margin: 0 40px;
        padding-top: 15px;
    }

    .header-setting .addBtn {
        position: absolute;
        right: 40px;
        bottom: 30px;
        margin: 0;
        padding: 0;
    }

    /*main*/
    .main {
        display: flex;
        width: 100%;
        background: #fff;
        border-top: 1px solid #ddd;
    }

    .main div {
        height: auto;
    }

    .main .left-box {
        width: 20%;
        border-right: 1px solid #ddd;
        padding: 13px 20px 20px;
    }

    .main .right-box {
        flex: 1;
        padding: 20px;
    }

    .ant-row {
        padding: 7px 0;
    }

    .saveDelete button {
        margin: 0 15px
    }
</style>
